<template>
  <view class="searchbox">
    <image class="searchimage" :src="icon" />
    <input class="uni-input" focus :placeholder="placeholder" />
  </view>
  <view class="searchDown">
    <view
      class="searchMethod"
      @click="setActive('button1')"
      :class="{ active: isActive === 'button1' }"
    >
      {{ searchMethod }}</view
    >
    <view class="ordering" @click="setActive('button2')" :class="{ active: isActive === 'button2' }"
      >{{ ordering }}
      <image src="/static/svg/sort.png" class="sortsvg" />
    </view>
    <view @click="">
      筛选
      <image src="/static/svg/down.png" class="downsvg" />
    </view>
  </view>
</template>

<script lang="ts">
export default {
  name: 'Serachbox',
  props: {
    placeholder: String,
    searchMethod: String,
    ordering: String,
    icon: String,
  },
  data() {
    return {
      isActive: '',
    }
  },
  computed: {},
  methods: {
    setActive(button: string) {
      this.isActive = button
    },
    // showBar(clickforbar){
    //   this.clickforbar = !this.clickforbar
    // }
  },
  watch: {},
}
</script>

<style lang="scss" scoped>
.active {
  font-weight: bold;
}
.menubar {
  width: 30px;
  height: 30px;
}
.searchbox {
  height: 30px;
  display: flex;
  background-color: #f2f2f2;
  border-radius: 20px;
  align-items: center;
  .searchimage {
    width: 30px;
  }
}
.searchDown {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
  .downsvg {
    height: 20px;
    width: 20px;
    margin-left: -10px;
  }
  .searchMethod {
    margin-left: 30px;
  }
  .ordering {
    margin-right: 30px;
    .sortsvg {
      width: 10px;
      height: 10px;
    }
  }
}
</style>
